<html manifest="IGNORE.manifest"  lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../css/index.css"  th:href="@{${uiPath} + ${appName} + '/css/index.css'}"/>
    <link rel="stylesheet" type="text/css" href="../css/reset.css" th:href="@{${uiPath} + ${appName} + '/css/reset.css'}" />
    <link rel="stylesheet" type="text/css" href="../css/CLSRZ.css"  th:href="@{${uiPath} + ${appName} + '/css/CLSRZ.css'}"/>
    <link rel="stylesheet" type="text/css" href="../css/zdialog.css"  th:href="@{${uiPath} + ${appName} + '/css/zdialog.css'}"/>
    <link rel="stylesheet" type="text/css" href="../css/webuploader.css"  th:href="@{${uiPath} + ${appName} + '/css/webuploader.css'}"/>
    <script type="text/javascript" src="../js/flexible.js" th:src="@{${uiPath} + ${appName} + '/js/flexible.js'}"></script>
</head>
<body>
<div class="rzzong">
    <form id="commentForm" th:action="@{'/designerUser/account/authSave'}" method="post">
        <div class="gtoubu">
            <a href="CLSSingle.html"><img class="fanhui" src="../images/raw_1503386635.png" alt="" th:src="@{${uiPath} + ${appName} + '/images/raw_1503386635.png'}"></a>
            <p class="biaoti">设计师认证</p>
        </div>

        <div class="renzhengtishi">
            <!--
               <p class="shngchuansk">真实姓名</p><input class="shuruguig" type="text" name="name" placeholder="请输入商品型号">
               <p class="shngchuansk">身份证号码</p> <input class="shuruguig chicun"type="text" name="idCard" placeholder="请输入商品尺寸(单位cm)">
               <p class="shngchuansk">手机号码</p><input class="shuruguig yanse" type="text" name="phone" id="phone"placeholder="请输入商品颜色">
               <div class="bangdingq">
                   <p class="sjhq">验证码：</p>
                   <input class="zsyanq" type="text" id="code">
               </div>
               <div class="fasoy" onclick="sendCode()">
                   <p>发送验证码</p>
               </div>-->
            <div class="kuaiw"></div>
            <ul>
                <input  class="" type="hidden" id="img1" name="cardFront">
                <input  class="" type="hidden" id="img2" name="frontDocument">
                <li class="renzhengtiaos">
                    <p class="zhenshixinxi">真实姓名:</p >
                    <input class="shuruguig" type="text" name="name" id="name" placeholder="请输入真是姓名">
                </li>
                <li class="renzhengtiaos">
                    <p class="zhenshixinxi">身份证号:</p >
                    <input class="shuruguig" type="text" name="idCard" id="idCard" placeholder="请输入身份证号">
                </li>
                <li class="renzhengtiaos">
                    <p class="zhenshixinxi">手机号:</p >
                    <input class="shuruguig" type="text"  name="phone"id="phone" placeholder="请输入手机号">
                </li>
                <li class="renzhengtiaos">
                    <input class="shuruguig yanzhengma" type="text" id="code" placeholder="请输入验证码">
                    <p class="zhenshixinxi yanzhengfas" onclick="sendCode()">点击发送</p >
                    <p class="daojishi">60</p>
                </li>
            </ul>
            <div id="shctp1" style="height: 8rem">
                <p class="shngchuansk" style="clear: both">请上传身份证照片</p>
                <div id="uploader-demo" style="margin-left: 1rem">

                    <div id="filePickerd" class="zhaopianbeijing"></div>
                    <div id="fileList"  class="xqtu uploader-list"></div>
                </div>
            </div>
            <div id="shctp2" style="height: 8rem" >
                <p class="shngchuansk" style="clear: both">请上传人脸照片</p>

                <div id="uploader-demo" style="margin-left: 1rem">
                    <div id="filePickerd2" class="zhaopianbeijing"></div>
                    <div id="fileList1"  class="xqtu uploader-list"></div>
                </div>
            </div>


        </div>
    </form>
    <div class="kuaiw"></div>
    <div class="nextx" onclick="save()">
        <p class="nextdd">完成</p>
    </div>
</div>



<script type="text/javascript" src="../js/jquery.min.js" th:src="@{${uiPath} + ${appName} + '/js/jquery.min.js'}"></script>
<script type="text/javascript" src="../js/CLSRZ.js" th:src="@{${uiPath} + ${appName} + '/js/CLSRZ.js'}"></script>
<script type="text/javascript" src="../js/webuploader.min.js" th:src="@{${uiPath} + ${appName} + '/js/webuploader.min.js'}"></script>
<script type="text/javascript" src="../js/zdialog.js" th:src="@{${uiPath} + ${appName} + '/js/zdialog.js'}"></script>

<script th:inline="javascript">
    window.onload = function() {
        initUploader();
        initUploader1();

    };
    function initUploader() {
        //百度上传按钮
        var uploader = WebUploader.create({
            // swf文件路径
            swf: '../webuploader-0.1.5/Uploader.swf',
            // 文件接收服务端
            method: 'POST',
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: {
                "id": '#filePickerd',
                "multiple": true
            },
            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: false,
            // 选完文件后，是否自动上传。
            auto: false,
            // 只允许选择图片文件
            accept: {
                title: '图片文件',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
        });
        uploader.on( 'fileQueued', function(file) {
            $.ajax({
                url: 'http://easyjiang.huizhuangfang.com.cn/aliyun/oss/policy',
                type: 'GET',
                dataType: 'jsonp',
                jsonp: 'callback',
                success: function(result) {
                    var suffix = get_suffix(file.name);
                    var random_name = random_string();
                    uploader.options.formData.key = result.dir + '/' + random_name + suffix;
                    uploader.options.formData.policy = result.policy;
                    uploader.options.formData.OSSAccessKeyId = result.OSSAccessKeyId;
                    uploader.options.formData.success_action_status = 200;
                    uploader.options.formData.callback = result.callback;
                    uploader.options.formData.signature = result.signature;
                    uploader.options.server = result.action;
                    uploader.upload();
                },
                error: function(msg) {
                    console.log(msg);
                }
            });
        });
        uploader.on( 'uploadSuccess', function(file, response) {
            $('#img1').val(response.data.filename).focus();
            $("#fileList").css("background-image", 'url("' + response.data.filename+ '")');



        });
        uploader.on( 'uploadError', function(file) {
            console.log('uploadError', file);
        });
    }
    function initUploader1() {
        //百度上传按钮
        var uploader = WebUploader.create({
            // swf文件路径
            swf: '../webuploader-0.1.5/Uploader.swf',
            // 文件接收服务端
            method: 'POST',
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: {
                "id": '#filePickerd2',
                "multiple": true
            },
            // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
            resize: false,
            // 选完文件后，是否自动上传。
            auto: false,
            // 只允许选择图片文件
            accept: {
                title: '图片文件',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
        });
        uploader.on( 'fileQueued', function(file) {
            $.ajax({
                url: 'http://easyjiang.huizhuangfang.com.cn/aliyun/oss/policy',
                type: 'GET',
                dataType: 'jsonp',
                jsonp: 'callback',
                success: function(result) {
                    var suffix = get_suffix(file.name);
                    var random_name = random_string();
                    uploader.options.formData.key = result.dir + '/' + random_name + suffix;
                    uploader.options.formData.policy = result.policy;
                    uploader.options.formData.OSSAccessKeyId = result.OSSAccessKeyId;
                    uploader.options.formData.success_action_status = 200;
                    uploader.options.formData.callback = result.callback;
                    uploader.options.formData.signature = result.signature;
                    uploader.options.server = result.action;
                    uploader.upload();
                },
                error: function(msg) {
                    console.log(msg);
                }
            });
        });
        uploader.on( 'uploadSuccess', function(file, response) {
            $('#img2').val(response.data.filename).focus();
            $("#fileList1").css("background-image", 'url("' + response.data.filename+ '")');

        });
        uploader.on( 'uploadError', function(file) {
            console.log('uploadError', file);
        });
    }
    // 根据路径获取后缀
    function get_suffix(filename) {
        var pos = filename.lastIndexOf('.');
        var suffix = '';
        if (pos != -1) {
            suffix = filename.substring(pos);
        }
        return suffix;
    }
    //发送验证码
    function sendCode(){
        $.ajax({
            type:'post',
            url:"/materialUser/account/phoneCode",
            data:{'phone':$('#phone').val()},
            dataType:'json',

            success:function (result) {
                if(result.code==1){
                    $.DialogByZ.Alert({Title: "发送成功", Content: result.data,BtnL:"确定"})
                }else{
                    $.DialogByZ.Alert({Title: "发送失败", Content: result.data,BtnL:"确定"})
                }
            }
        })
    }
    function localhref(){
        window.location.href="/materialUser/index"

    }
    function save() {
        $.DialogByZ.Loading(/*[[${uiPath}+${appName}+'/images/loading.png']]*/)
        $.ajax({
            type:'post',
            url:'/materialUser/account/checkCode',
            data:{'code':$('#code').val(),'phone':$('#phone').val()},
            beforeSend:function() {
                if ($('#code').val() == '') {
                    alert("请输入验证码");
                    return false;
                }
            },
            success: function(result) {
                if(result.code==1){
                    $.ajax({
                        type:'post',
                        url:$('#commentForm').attr('action'),
                        data:$('#commentForm').serialize(),
                        dataType:'json',
                        success:function (result) {
                            if(result.code==1){
                                $.DialogByZ.Close();
                                $.DialogByZ.Alert({Title: "提交成功", Content:result.data ,BtnL:"确定",BtnR:"取消",FunL:localhref})
                            }else{
                                $.DialogByZ.Close();
                                $.DialogByZ.Alert({Title: "提交失败", Content:result.data  ,BtnL:"确定"})
                            }
                        }
                    })
                }
            }

        })

    }
    var timer = 60;
    var id;
    $('.yanzhengfas').click(function(){
        $('.yanzhengfas').css({
            display:'none'
        })
        $('.daojishi').css({
            display:'block'
        })
        id = setInterval(function(){
            timer--;
            $('.daojishi').html(timer);
            if (timer == 0) {
                window.clearInterval( id);
                $('.yanzhengfas').css({
                    display:'block'
                })
                $('.daojishi').css({
                    display:'none'
                })
                $('.daojishi').html('5');
                $('.yanzhengfas').html('重新发送');
                timer = 60;
            }
        },1000)

    })
    // 随机字符串
    function random_string(len) {
        len = len || 32;
        var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
        var maxPos = chars.length;
        var pwd = '';
        for (i = 0; i < len; i++) {
            pwd += chars.charAt(Math.floor(Math.random() * maxPos));
        }
        return pwd;
    }
</script>

</body>
</html>